import { message } from 'antd';
import styles from './style.less';
import { connect, Link, history } from 'umi';
import { useEffect, useState, useRef } from 'react';
import DirMenu from '@/components/doc/DirMenu'
import { DOC_TYPE } from '@/consts/doc';
import { deleteDir, list, updateArticleDir } from '@/services/doc/article'
import ArticleEdit from './ArticleEdit'
import ArticleDetail from './ArticleDetail'
import ArticleHome from './ArticleHome'

import { FileAddOutlined } from '@ant-design/icons'

const ProjectArticle = (props) => {

    const {
        projectId,
        projectPermission,
        routeParam,
        location,
    } = props;

    const [articleMode, setArticleMode] = useState("home")
    const [currentDocData, setCurrentDocData] = useState();
    const [viewDocId, setViewDocId] = useState();
    const menu = useRef();

    useEffect(() => {
        // console.log(props)
        if (routeParam?.itemId) {
            // console.log("viewDocId",routeParam.itemId)
            setArticleMode("view")
            setViewDocId(routeParam.itemId)
        } else {
            setArticleMode("home")
        }
    }, [routeParam])

    useEffect(() => {
        // console.log(location.state)
        if (location.state) {
            setArticleMode("edit")
            setCurrentDocData({
                docId: location.state.docId
            })
        }
    }, [location])

    const deleteDocDir = (docDir, callBack) => {
        deleteDir(projectId, docDir.id).then((result) => {
            if (result?.success) {
                message.success("删除目录成功")
            }
            if (callBack) {
                callBack(result)
            }
        })
    }


    const addArticle = (dir, dirRoutes) => {
        setArticleMode("edit")
        setCurrentDocData({
            dir: dir,
            dirRoutes: dirRoutes
        })
        // history.push(`/projects/${projectId}/article`)
    }

    const onSaveSuccess = (doc) => {
        console.log(doc)
        history.push(`/projects/${projectId}/article/${doc.id}`)
        setArticleMode("view");
        menu.current && menu.current.addDocNode(doc.dirId, {
            id: doc.id,
            title: doc.name,
            dirId: doc.dirId,
            key: doc.id,
            isDir: false,
            isLeaf: true,
            sortNo: doc.sortNo || 0,
            dirId: doc.dirId
        })
    }

    const onClickDoc = (docNode, dirRoutes) => {
        // console.log(docNode, dirRoutes)
        history.push(`/projects/${projectId}/article/${docNode.id}`)
        setArticleMode("view");
        // setViewDocId(docNode.id)
    }

    const updateDocDir = (id, data) => {
        updateArticleDir(projectId, id, data).then((result) => {

        })
    }

    const loadDocData = (keys, onLoadDoc) => {
        list(projectId, {
            inDirId: keys
        }).then((result) => {
            let docList = result?.data || []
            docList = docList.map((doc) => {
                return {
                    id: doc.id,
                    title: doc.name,
                    dirId: doc.dirId,
                    key: doc.id,
                    isDir: false,
                    isLeaf: true,
                    sortNo: doc.sortNo,
                    dirId: doc.dirId
                }
            })
            let docData = {};
            docList.forEach((doc) => {
                docData[doc.dirId] = docData[doc.dirId] || [];
                docData[doc.dirId].push(doc)
            })
            onLoadDoc(docData)
        })
    }

    const onLoadDetail = (docDetail) => {
        if (docDetail) {
            console.log("onLoadDetail", menu.current)
            menu.current && menu.current.expendDirs([docDetail.dirId])
        }
    }

    const renderArticleContent = () => {
        if (articleMode === "home") {
            return <ArticleHome projectId={projectId} projectPermission={projectPermission} />
        } else if (articleMode === "edit") {
            return <ArticleEdit projectId={projectId} projectPermission={projectPermission} onSaveSuccess={onSaveSuccess} docData={currentDocData} />
        } else if (articleMode === "view") {
            return <ArticleDetail projectId={projectId} projectPermission={projectPermission} onLoadDetail={onLoadDetail} docId={viewDocId} />
        }
    }



    return (<div className={styles.docBody}>
        <DirMenu
            ref={menu}
            title={<Link to={`/projects/${projectId}/article`}>目录</Link>}
            projectId={projectId}
            updateDocDir={updateDocDir}
            width="200px"
            docType={DOC_TYPE.ARTICLE}
            deleteDir={deleteDocDir}
            onClickDoc={onClickDoc}
            dirOpertion={[
                {
                    key: "addArticle",
                    icon: <FileAddOutlined />,
                    name: "新建文档",
                    onClick: addArticle
                }
            ]}
            loadDocData={loadDocData}
        >
        </DirMenu>
        <div style={{
            width: "calc(100% - 200px)"
        }}>
            {renderArticleContent()}
        </div>
    </div>)
}

export default ProjectArticle